<template>
    <div class="kaipin-laboratory">
        <c-title text="开品广场"></c-title>
        <van-search v-model="keyword" placeholder="请输入搜索的内容" @search="search" />
        <van-tabs v-model="active" title-inactive-color="#00001C" line-width="0.9375rem"
            title-active-color="var(--themeBaseColor)" line-height="0.1563rem" :ellipsis="false" @click="tab_handle">
            <van-tab v-for="(item, index) in category_list" :key="index" :title="item.name" :name="item.id">

            </van-tab>
        </van-tabs>
        <div class="child-box">
            <van-tabs v-model="child_active" background="transparent" line-width="0" line-height="0"
                title-active-color="var(--themeBaseColor)" title-inactive-color="#00001C" :ellipsis="false"
                @click="tab_child_handle">
                <van-tab v-for="(c_item, c_index) in status_list" :key="c_index" :title="c_item.name"
                    :name="c_item.status"></van-tab>
            </van-tabs>
        </div>
        <div class="ul">
            <div class="li" v-for="item in list" :key="item.id" @click="goto('kaipin_details', item.id)">
                <img :src="item.main_images_url.length !== 0 && item.main_images_url[0]">
                <div class="li-right">
                    <div class="title">{{ item.name }}</div>
                    <div class="pb-10">
                        <div class="flex-center mb-16 line-hegith-1">
                            <span class="txt">出品周期：</span><span class="count">{{ item.cycle }}天</span>
                            <span class="txt ml-10">总量：</span><span class="count">{{ item.total_amount }}</span>
                        </div>
                        <div class="flex-center line-hegith-1">
                            <span class="txt">开品价格：</span><span class="count">{{ item.price }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="footer" :class="{ 'w375': fun.isPc() }">
            <div class="footer-item">
                <i class="iconfont icon-shangpin1" style="color:var(--themeBaseColor);"></i>
                <span>开品广场</span>
            </div>
            <div class="footer-item" @click="goto('kaipin_my')">
                <i class="iconfont icon-wodecangpin"></i>
                <span>我的开品</span>
            </div>
        </div>
    </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
    mixins: [scrollMixin],
    data() {
        return {
            keyword: "",
            active: 0,
            child_active: 0,
            list: [],
            isLoadMore: true,
            page: 1,
            total_page: 0,
            category_list: [],
            status_list: [
                { name: "全部", status: 0 },
                { name: "待开品", status: 5 },
                { name: "已开品", status: 1 },
                { name: "出品中", status: 2 },
                { name: "已完成", status: 3 },
                { name: "开品失败", status: -1 }],
            params_json: {
                name: "",
                category_id: "",
                status: ""
            },
            category_id:"",

        }
    },
     activated() {
         this.getCategory();
        this.isLoadMore = true;
        this.child_active = 0;
        this.keyword = "";
        this.params_json.name = "";
        this.params_json.status = "";
     
        
    },
    methods: {
        goto(url, params = '') {
            if (params) {
                this.$router.push(this.fun.getUrl(url, { id: params }))
                return;
            }
            this.$router.push(this.fun.getUrl(url))
        },
        tab_child_handle(name) {
            if (name !== 0) {
                this.params_json.status = name == 5 ? 0 : name;
            } else {
                delete this.params_json.status
            }
            if (this.keyword) {
                this.params_json.name = this.keyword;
            }
            this.getData(1, this.params_json);
        },
        search() {
            console.log(this.child_active,'child_active==')
            let json = { ...this.params_json, name: this.keyword }
            this.getData(1, json);
        },
        tab_handle(name) {
            this.child_active = 0;
            let json = {};
            let category_id = "";
            if (name !== -1) {
                json.category_id = name;
            }
            if (this.child_active == 0) {
                json.status = '';
            }

            if (this.keyword) {
                json.name = this.keyword;
            }
            this.params_json = json;
            if (this.child_active !== 0) {
                this.params_json.status = this.child_active == 5 ? 0 : this.child_active;
                json.status = this.child_active == 5 ? 0 : this.child_active;
            }
            this.getData(1, json);
        },
        getData(page = 1, json) {
            let _json = {};
            if (json) {
                _json = { ...json, page }

            } else {
                _json.page = page;
            }
            if (this.active !== 0 && this.active !== -1) {
                _json.category_id = this.category_list[this.active].id;
            }
            $http.post('plugin.kaipin-laboratory.frontend.product-plaza.get-product-list', _json, '').then(res => {
                console.log(res, 'res===')
                this.isLoadMore = true;
                if (res.result !== 1) {
                    return this.$toast(res.msg);
                }
                let { data, current_page, last_page } = res.data;

                this.page = current_page;
                this.total_page = last_page;
                this.list = page == 1 ? data : this.list.concat(data);
            })
        },
        getCategory() {
            $http.get('plugin.kaipin-laboratory.frontend.product-plaza.get-category-list', '', '').then(res => {
                if (res.result !== 1) {
                    return this.$toast(res.msg);
                }
                let category_list = [{ name: "全部", id: -1 },...res.data]
                this.category_list = category_list;
                if(this.$route.query.category_id){
                    let index = category_list.findIndex(item=>item.id==this.$route.query.category_id);
                    console.log(index,'index===');
                    this.active = index;
                }
                this.getData()

            })

        },
        getMoreData() {
            this.isLoadMore = false;
            if (this.page >= this.total_page) return;
            let page = this.page + 1;
            this.getData(page, this.params_json);
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .van-tabs__line {
    bottom: 20px;
}

::v-deep .van-tabs__line {
    background-color: var(--themeBaseColor);
}

.w375 {
    width: 375px;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    left: 50% !important;
    right: 0 !important;
    bottom: 0 !important;
}
.child-box{
    margin-top: 0.625rem;
}

.child-box ::v-deep .van-tab:first-child {
    margin-left: .75rem;
}

.child-box ::v-deep .van-tab--active span {
    position: relative;
    color: var(--themeBaseColor) !important;
    // background-color: #F5E4E4 !important;
    overflow: hidden;
    border: 1px solid var(--themeBaseColor) !important;
    box-sizing: border-box;
    display: block;
    width: max-content;
}

.child-box ::v-deep .van-tab--active span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--themeBaseColor);
    opacity: 0.3;

}

.child-box ::v-deep .van-tabs--line .van-tabs__wrap {
    // height: 2.8125rem;
    // line-height: 2.8125rem;
}

.child-box ::v-deep .van-tab {
    flex: unset;
    margin-right: .5rem;
    display: block;
    padding: 0;
}

.child-box ::v-deep .van-tabs__line {
    display: none;
}

.child-box ::v-deep .van-tab span {
    padding: 0 .75rem;
    background-color: #fff;
    border: 1px solid #fff;
    height: 1.5rem;
    line-height: 1.5rem;
    color: #00001C;
    flex-shrink: 0;
    font-size: .8125rem;
    border-radius: 0.75rem;
    display: block;
    width: max-content;
    box-sizing: border-box;
}

.kaipin-laboratory {
    padding-bottom: 3.0625rem;

    .footer {
        position: fixed;
        bottom: 0;
        height: 3.0625rem;
        left: 0;
        right: 0;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .footer-item {
        font-size: .625rem;
        color: #00001C;
        display: flex;
        flex-direction: column;
        justify-content: center;

        i {
            font-size: 1.25rem;
        }
    }

    .line-hegith-1 {
        line-height: 1;
    }

    .pb-10 {
        padding-bottom: .3125rem;
    }

    .mb-16 {
        margin-bottom: 0.5rem;
    }

    .ml-10 {
        margin-left: 10px;
    }

    .flex-center {
        display: flex;
        align-items: center;
    }

    .ul {
        margin: 0 .75rem 0.6875rem;
    }

    .li {
        display: flex;
        border-radius: 10px;
        background-color: #fff;
        padding: .625rem;
        margin-bottom: 10px;
    }

    .title {
        font-size: 0.875rem;
        color: #00001C;
        margin-bottom: 1.1875rem;
        text-align: left;
    }

    .li-right {
        margin-left: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }

    img {
        margin: 0;
        display: block;
        width: 5.625rem;
        border-radius: 0.5rem;
        height: 5.625rem;
    }

    .txt {
        color: #6E6E79;
        font-size: 0.8125rem;
    }

    .count {
        font-size: 0.8125rem;
        color: #F15353;
    }
}
</style>